<template>
    <div class="common-body-wrapper">
        <search-header single-width="130" 
        :isNeedTree="true" 
        :isCheckbox="true"
        :paramName="paramName"
        :searchList="searchList" 
        @changeHeight="toRetTable"
        @setSelectedNode="setSelectedNode"
        @handleChange="handleSearchChange"
        @confirmSearch="toSearch"></search-header>
        <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
            <!--按钮-->
            <div class="operate-btn-group" slot="operateBtnGroup">
                <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:SHIFT:EXPORT')" @click.prevent="exportData()">导出</a>
            </div>
    
            <!--普通列-->
            <template slot="tdCell" slot-scope="props">
    
              <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
                <template v-for="(item, index) in props.children">
                  <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="30" :prop="item.prop" :sortable="item.sortable">
                  </el-table-column>
                </template>
              </el-table-column>
    
                <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
                    <template slot-scope="scope">
                        <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
                        <span v-else-if="'receivedAmount'==props.prop && scope.row['dataOrigin']==1 && scope.row['status']=='UN_PAID'">
                          <a class="confirmReturn_btn" @click="confirmReturn(scope.row)" v-if="isPermmited('REPORT:SHIFT:CONFIRM_RECEIVED_AMOUNT')">确认回款</a>
                          <!-- <a class="confirmReturn_btn" @click="confirmReturn(scope.row)">确认回款</a> -->
                        </span>
                        <span v-else>{{ scope.row[props.prop] }}</span>
                    </template>
                </el-table-column>
            </template>
    
            <!--操作列内的按钮-->
            <template slot="operateCell" slot-scope="props">
                <el-table-column :fixed="props.fixed" :label="props.label" min-width="40">
                    <template slot-scope="scope">
                        <!-- <el-button title="导出详情" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_text" icon="icon-export" plain v-if="isPermmited('REPORT:SHIFT:EXPORT_DETAIL')" @click="exportDetails(scope.row)"></el-button> -->
                        <el-button title="导出详情" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_text" icon="icon-export" plain v-if="isPermmited('REPORT:SHIFT:EXPORT_DETAIL')" @click="exportDetails(scope.row)"></el-button>
                        <!-- <el-button title="详情" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_text" icon="el-icon-info" v-if="isPermmited('REPORT:AKE:LIST')" @click="toOpenOnlineSettleReportDetail(scope.row,'onlineSettleReportDetailModal')"></el-button>
                        <el-button title="确认现金收款" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_green" icon="circle-check" v-if="isPermmited('REPORT:AKE:CONFIRM_SETTLE') && scope.row.auditStatus!=0 && scope.row.settleStatus==1" @click="confirmOnlineSettle(scope.row)"></el-button> -->
                    </template>
                </el-table-column>
            </template>
        </multi-fun-table>
    
        <!---->
        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    

    
    </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
// import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
// import images from '@mixins/image.js'

// 引进vue的js
import R_shift from "./js/R_shift.js";

export default {
  name: 'reportShift',
  mixins: [common, stardardList, invokeModal, R_shift],
  data() {
    return {
      total: 0,
      fixedCols: 0,
      paramName: "parkIds",
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "text",
          name: "query_shiftFromAccount",
          text: "交班人账号",
          value: ""
        },
        {
          index: 1,
          isShow: false,
          type: "text",
          name: "query_shiftToAccount",
          text: "接班人账号",
          value: ""
        },
        {
          index: 2,
          isShow: false,
          type: "datePicker",
          pickerType: "daterange",
          name: "rangeDate",
          propName: "reportDateFrom,reportDateTo",
          text: "交接时间",
          value: "",
          style: { width: "360px" }
        },
        {
          index: 3,
          isShow: false,
          type: "select",
          name: "query_status",
          text: "回款状态",
          value: "",
          options:[
            {name:'全部',value:""},
            {name:'全部回款',value:2},
            {name:'异常回款',value:1},
            {name:'未回款',value:0},
          ]
        },
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "shiftFromAccount",
          text: "交班人账号",
          minWidth: 62
        },
        {
          index: 2,
          isShow: false,
          prop: "shiftFromName",
          text: "交班人姓名",
          minWidth: 60
        },
        {
          index: 3,
          isShow: false,
          prop: "shiftMoneyStr",
          text: "交班人收款总额与次数",
          minWidth: 60
        },
        {
          index: 4,
          isShow: false,
          prop: "normalAmountStr",
          text: "正常收款与次数",
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: "abnormalAmountStr",
          text: "异常收款与次数",
          minWidth: 60
        },
        {
          index: 6,
          isShow: false,
          prop: "shiftArrearMoneyStr",
          text: "补缴收款与次数",
          minWidth: 60
        },
        {
          index: 7,
          isShow: false,
          prop: "abOutUncollectedMoneyStr",
          text: "异常放行未收与次数",
          minWidth: 60
        },
        {
          index: 8,
          isShow: false,
          prop: "gateOutUncollectedMoneyStr",
          text: "遥控开闸未收与次数",
          minWidth: 60
        },
        {
          index: 9,
          isShow: false,
          prop: "shiftDiscountMoneyStr",
          text: "交班人优惠与次数",
          minWidth: 60
        },
        {
          index: 10,
          isShow: false,
          prop: "loginInTime",
          text: "接班时间",
          minWidth: 70,
          width: 85
        },
        {
          index: 11,
          isShow: false,
          prop: "shiftTime",
          text: "交接时间",
          minWidth: 70,
          width: 85
        },
        {
          index: 12,
          isShow: false,
          prop: "shiftToAccount",
          text: "接班人账号",
        },
        {
          index: 13,
          isShow: false,
          prop: "shiftToName",
          text: "接班人姓名",
        },
        {
          index: 14,
          isShow: false,
          prop: "shiftOriginTypeStr",
          text: "收费类型",
        },
        {
          index: 15,
          isShow: false,
          prop: "shiftTypeStr",
          text: "交接班类型",
        },
        {
          index: 16,
          isShow: false,
          prop: "receivableTotalAmount",
          text: "应回款（总额）",
        },
        {
          index: 17,
          isShow: false,
          prop: "receivedAmount",
          text: "已回款",
          minWidth: 75,
          width: 75
        },
        {
          index: 18,
          isShow: false,
          prop: "balanceAmount",
          text: "差额",
        },
        {
          index: 19,
          isShow: false,
          prop: "userAccount",
          text: "操作员",
        },
        {
          index: 19,
          isShow: false,
          prop: "operationTime",
          text: "操作时间",
          minWidth: 70,
          width: 85
        }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less" scoped>
.confirmReturn_btn{
  color: #5995D8;
  cursor: pointer;
}
.group-row-modal {
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}
</style>